import LPopup from "@/components/public/lPopup/lPopup";
import { message } from "ant-design-vue";
import to from "await-to-js";
import _ from "lodash";
import { defineComponent, reactive, ref } from "vue";
import styles from "./EditPopup.module.less";


export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ['confirm'],
  setup(prop, { expose, emit }) {
    const editPopupRef = ref(null as any);
    const item = {
      value: '',
    }
    const state_default = {
      name: '',
      form: {
        id: null,
        insureAge: [
          {
            value: '',
          }
        ],
        insureDay: [
          {
            value: '',
          }
        ],
      }
    }
    const state: any = reactive(
      _.cloneDeep(state_default)
    )
    
    //删除一行
    const deleteOne = (idx: number, type: string) => {
      if (state.form[type].length === 1) {
        return
      }
      state.form[type].splice(idx, 1);
    }
    //确定
    const submit = async () => {
      state.form.insureAge.forEach((item: any) => {
        if (!item) {
          message.error('请输入保障年龄');
          return;
        }
      })
      state.form.insureDay.forEach((itemD: any) => {
        if (!itemD) {
          message.error('请输入保障期限');
          return;
        }
      })
      state.form.insureAge = state.form.insureAge.map((item: any) => item.value)
      state.form.insureDay = state.form.insureDay.map((item: any) => item.value)
      const [err, res]: any = await to(prop.service.edit(state.form));
      if (!err) {
        message.success('编辑成功');
        editPopupRef.value.close();
        emit('confirm');
      }
    }

    const open = (e: any) => {
      state.form.id = e.id;
      state.name = e.name;
      editPopupRef.value.open();
    }

    expose({
      open
    })
    return () => (
      <LPopup
        width="700px"
        title="编辑计划"
        ref={editPopupRef}
        onBeforeClose={() => {
          Object.entries(
            _.cloneDeep(state_default)
          ).forEach(item => {
            state[item[0]] = item[1];
          })
        }}
      >
        <div class={styles.editPopup}>
          <div class={styles.name}>名称：{state.name}</div>
          <div class={styles.addBox}>
            <div class={styles.title}>保障年龄</div>
            <div class={styles.list}>
              <div class={styles.thred}>
                <div class={styles.thredItem}>内容</div>
                <div class={styles.thredItem}>操作</div>
              </div>
              {
                state.form.insureAge.map((itemA: any, index: number) => (
                  <div class={styles.row}>
                    <div class={styles.cell}>
                      <a-input v-model:value={itemA.value}
                        style={{ width: '80%' }}
                        placeholder="请输入保障年龄" />
                    </div>
                    <div class={styles.cell}>
                      <a-button
                        type="primary"
                        size="small"
                        danger
                        onClick={() => { deleteOne(index, 'insureAge') }}
                      >删除</a-button>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
          <div class={styles.addBtn}>
            <a-button
              type="primary"
              size="small"
              onClick={() => { state.form.insureAge.push(_.cloneDeep(item)) }}
            >添加保障年龄</a-button>
          </div>
          <div class={styles.addBox}>
            <div class={styles.title}>保障期限</div>
            <div class={styles.list}>
              <div class={styles.thred}>
                <div class={styles.thredItem}>内容</div>
                <div class={styles.thredItem}>操作</div>
              </div>
              {
                state.form.insureDay.map((itemD: any, index: number) => (
                  <div class={styles.row}>
                    <div class={styles.cell}>
                      <a-input v-model:value={itemD.value}
                        style={{ width: '80%' }}
                        placeholder="请输入保障期限" />
                    </div>
                    <div class={styles.cell}>
                      <a-button
                        type="primary"
                        size="small"
                        danger
                        onClick={() => { deleteOne(index, 'insureDay') }}
                      >删除</a-button>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
          <div class={styles.addBtn}>
            <a-button
              type="primary"
              size="small"
              onClick={() => { state.form.insureDay.push(_.cloneDeep(item)) }}
            >添加保障期限</a-button>
          </div>
          <div class={styles.footer}>
            <a-button
              type="primary"
              style={{ marginRight: '10px' }}
              onClick={() => { submit() }}
            >确定</a-button>
            <a-button
              onClick={() => { editPopupRef.value.close(); }}
            >取消</a-button>
          </div>
        </div>
      </LPopup>
    )
  }
})